<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="文件路径:">
        <el-input
          v-model="userSrc"
          placeholder="请输入账号文件路径"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="seeDetails">查看文件夹</el-button>
      </el-form-item>
      <el-form-item label="分类:">
        <el-select
          v-model="itemSort"
          placeholder="请选择分类"
          clearable
          style="width: 240px"
        >
          <el-option label="新号私信" value="新号私信" />
          <el-option label="旧号私信" value="旧号私信" />
          <el-option label="恢复采集" value="恢复采集" />
          <el-option label="分类账号" value="分类账号" />
        </el-select>
      </el-form-item>
      <el-form-item label="上传账号个数:">
        <el-input
          v-model="userCount"
          placeholder="请输入每个号段要上传数量"
          clearable
        />
      </el-form-item>
      <el-form-item label="存放目录:">
        <el-input
          v-model="depositSrc"
          placeholder="请输入账号文件存放路径"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="normalUpload">普通上传</el-button>
        <el-button type="success" @click="ClassifiedUpload">分类上传</el-button>
        <el-button type="success" @click="compressUploadasync"
          >压缩包上传</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
  <el-table
    :data="tableData"
    border
    @selection-change="handleSelectionChange"
    stripe
    style="width: 100%"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="sortName" label="分组名" />
  </el-table>
</template>
  
  <script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  getFileDir,
  normalUploadDir,
  classifiedUpload,
  compressUploadasyncDir,
} from "../api/UploadFile";
import { ElLoading } from "element-plus";
const userSrc = ref("");
const itemSort = ref("");
const userCount = ref("");
const depositSrc = ref("");

const tableData = ref([]);
const selectedRows = ref([]);

const seeDetails = async () => {
  if (!userSrc.value) {
    ElMessage({
      message: "请输入要查看的路径",
      type: "error",
    });
    return;
  }

  const dir = userSrc.value.replace(/\\/g, "|");

  try {
    const response = await getFileDir(dir);
    if (response?.data) {
      // 使用可选链操作符
      tableData.value = response.data.map((item, index) => ({
        id: index,
        sortName: `${userSrc.value}\\${item}`,
      }));
    }
  } catch (error) {
    ElMessage({
      message: "获取目录失败",
      type: "error",
    });
  }
};
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

const normalUpload = async () => {
  const selected = selectedRows.value; // Assuming selectedRows is a ref
  if (selected.length < 1 || !itemSort.value) {
    ElMessage({
      message: "请选择账号路径或者账号分类",
      type: "error",
    });
    return;
  }

  const loading = ElLoading.service({
    lock: true,
    text: "正在上传",
    background: "rgba(0, 0, 0, 0.7)",
  });

  const dirArr = selected.map((item) => {
    return item.sortName.replace(/\\/g, "|");
  });
  const response = await normalUploadDir(dirArr, itemSort.value);
  ElMessage({
    message: response.message,
    type: "success",
  });
  loading.close();
};

const compressUploadasync = async () => {
  const selected = selectedRows.value; // Assuming selectedRows is a ref
  if (selected.length < 1 || !itemSort.value) {
    ElMessage({
      message: "请选择账号路径或者账号分类",
      type: "error",
    });
    return;
  }

  const loading = ElLoading.service({
    lock: true,
    text: "正在上传",
    background: "rgba(0, 0, 0, 0.7)",
  });

  const dirArr = selected.map((item) => {
    return item.sortName.replace(/\\/g, "|");
  });
  const response = await compressUploadasyncDir(dirArr, itemSort.value);
  ElMessage({
    message: response.message,
    type: "success",
  });
  loading.close();
};

const ClassifiedUpload = async () => {
  if (selected.length < 1 || !itemSort.value) {
    ElMessage({
      message: "请选择账号路径或者账号分类",
      type: "error",
    });
    return;
  }

  const loading = ElLoading.service({
    lock: true,
    text: "正在上传",
    background: "rgba(0, 0, 0, 0.7)",
  });
  const selected = selectedRows.value; // Assuming selectedRows is a ref
  const dirArr = selected.map((item) => {
    return item.sortName.replace(/\\/g, "|");
  });
  const deposit = depositSrc.value.replace(/\\/g, "|");
  const response = await classifiedUpload(
    dirArr,
    itemSort.value,
    userCount.value,
    deposit
  );
  loading.close();
};
</script>
  
  <style lang="scss" scoped>
</style>